<template>
  <!--@desc pull and loadmore-->
  <div class="pull-model" :id="id||'pull-model'">
    <!--@Desc top shadow-->
    <div v-if="isViewPullShadow" class="pull-shadow">
      <div class="pull-shadow-box" :class="{'shadow-tween':pullState==='normal'}"
           :style="{transform:'translate3d(0,'+(pullScale*40)+'px,0)',opacity:pullScale,borderRadius:('50% /'+(pullScale*50)+'%')}"></div>
    </div>
    <!--@Desc top native style -->
    <div v-if="pullType==='native'" class="pull-closeElMove"
         :class="{'move-normal':pullState==='loading'||pullState==='normal'}"
         :style="{transform:'translate3d(0,'+(pullScale*100)+'px,0)'}">
      <img :class="{'inAni':pullState === 'loading'}" :src="opt.topPull.nativePullIcon||nativePullIcon"
           :style="{transform:'rotate('+(pullScale*360)+'deg)'}" alt="">
    </div>
    <!--@Desc top normal style -->
    <div v-if="pullType==='normal'" class="pull-normal-top">
      <img v-if="pullState==='loading'" :src="opt.topPull.loadingIcon||loadingIcon" alt="">
      <img v-if="pullState!=='loading'" :class="{'rotate-180':pullState==='trigger'}"
           :src="opt.topPull.pullIcon||pullIcon" alt="">
      <span>{{!pullState || pullState === 'pull' ? opt.topPull.pullWord||'下拉刷新' : pullState === 'trigger' ? opt.topPull.triggerWord||'释放更新' : pullState === 'loading' ? opt.topPull.loadingWord||'加载中...' : opt.topPull.pullWord||'下拉刷新'}}</span>
    </div>

    <div class="pull-scroll-container">
      <slot></slot>
    </div>

    <div v-if="bottomType==='normal'" class="pull-normal-bottom">
      <img v-if="bottomState==='loading'" :src="opt.bottomPull.loadingIcon||loadingIcon" alt="">
      <img v-if="bottomState!=='loading'" :class="{'rotate-180':bottomState==='trigger'}"
           :src="opt.bottomPull.pullIcon||pullIcon" alt="">
      <span>{{!bottomState || bottomState === 'pull' ? opt.bottomPull.pullWord||'上拉刷新' : bottomState === 'trigger' ?opt.bottomPull.triggerWord|| '释放更新' : bottomState === 'loading' ? opt.bottomPull.loadingWord||'加载中...' :  opt.bottomPull.pullWord||'上拉刷新'}}</span>
    </div>

    <div v-if="isViewBottomShadow" class="pull-bottom-shadow">
      <div class="pull-bottom-shadow-box" :class="{'shadow-tween':bottomState==='normal'}"
           :style="{transform:'translate3d(0,'+(-bottomScale*40)+'px,0)',opacity:bottomScale,borderRadius:('50% /'+(bottomScale*50)+'%')}"></div>
    </div>
  </div>
</template>
<script>
  import VuPull from './pull.js'

  import nativePullIcon from './image/load-native-icon.png'
  import loadingIcon from './image/loading.gif'
  import pullIcon from './image/up-icon.png'

  export default {
    name: 'vuu-pull',
    props: {
      id: {
        type: String,
        default: 'pull-model'
      },
      options: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        pullIcon,
        loadingIcon,
        nativePullIcon,
        'vuPull': null,
        'opt': {},
        'isViewPullShadow': false,
        'isViewBottomShadow': false,
        'bottomType': null,
        'pullType': null,
        'pullScale': 0,
        'pullDiff': 0,
        'pullState': null,
        'bottomState': 0,
        'bottomScale': 0
      }
    },
    created() {
      this.opt = this.options
      if (Object.prototype.toString.call(this.opt.topPull) !== '[object Object]') {
        this.opt.topPull = {
          pullWord: '',
          triggerWord: '',
          loadingWord: '',
          nativePullIcon: '',
          pullIcon: '',
          loadingIcon: ''
        }
      }

      if (Object.prototype.toString.call(this.opt.bottomPull) !== '[object Object]') {
        this.opt.bottomPull = {
          pullWord: '',
          triggerWord: '',
          loadingWord: '',
          pullIcon: '',
          loadingIcon: ''
        }
      }

      if (this.opt.isViewPullShadow) {
        if (!this.opt.isTopRefresh) {
          this.opt.isTopBounce = true
          this.opt.topCloseElMove = true
          this.isViewPullShadow = this.opt.isViewPullShadow
        }
        if (!this.opt.isBottomRefresh) {
          this.opt.isBottomBounce = true
          this.opt.bottomCloseElMove = true
          this.isViewBottomShadow = this.opt.isViewPullShadow
        }
      }

      // @Desc 开启下拉刷新的时候
      if (this.opt.isTopRefresh) {
        this.isViewPullShadow = false
        if (this.opt.pullType === 'native') {
          this.opt.topCloseElMove = true
          this.pullType = 'native'
        } else {
          this.pullType = 'normal'
        }
      }

      // @Desc 开启上拉刷新的时候
      if (this.opt.isBottomRefresh) {
        this.isViewBottomShadow = false
        this.bottomType = 'normal'
      }
    },
    mounted() {
      let vm = this

      let $pull = document.getElementById(vm.id)

      this.vuPull = new VuPull();

      let vuPull = this.vuPull;

      // @Desc 初始化vuPull配置
      vuPull.init($pull, this.opt);


      /*
       * @Fun onTop
       * @Desc 监听下拉事件
       * */
      vuPull.onTop = function () {
        let diff = this.diff * 0.5
        let pullH = this.defaults.topTriggerHeight
        if (diff > pullH) {
          diff = pullH
        }
        vm.pullScale = diff / pullH

        if (vm.isViewPullShadow) {
          if (vm.pullScale >= 1) {
            vm.pullScale = 0
            vm.pullState = 'normal'
          }
        }
      }

      /*
       * @Fun onBottom
       * @Desc 监听下拉事件
       * */
      vuPull.onBottom = function () {
        let diff = Math.abs(this.diff) * 0.5
        let bottomH = this.defaults.bottomTriggerHeight
        if (diff > bottomH) {
          diff = bottomH
        }
        vm.bottomScale = diff / bottomH

        if (vm.isViewPullShadow) {
          if (vm.bottomScale >= 1) {
            vm.bottomScale = 0
            vm.bottomState = 'normal'
          }
        }

      }

      /*
       * @Fun onPullEnd
       * @Desc 监听松手
       * */
      vuPull.onPullEnd = function () {

      }

      /*
       * @Fun onTopStatusChange
       * @Desc 下拉插件状态更新回调机制
       * */
      vuPull.onTopStatusChange = function () {
        vm.pullState = this.pullState
        if (vm.pullState === 'normal') {
          vm.pullScale = 0
        } else if (vm.pullState === 'loading') {
          vm.pullScale = 1
          vm.$emit('loadTop', this)
        }

      }

      /*
       * @Fun onBottomStatusChange
       * @Desc 插件上拉状态更新回调机制
       * */
      vuPull.onBottomStatusChange = function () {
        vm.bottomState = this.bottomState
        if (vm.bottomState === 'normal') {
          vm.bottomScale = 0
        } else if (vm.bottomState === 'loading') {

          vm.$emit('loadBottom', this)
        }

      }

      /*
       * @Fun onScrollBottom
       * @Desc 监听到滚动到底部
       * */
      vuPull.onScrollBottom = function () {
        vm.$emit('scrollBottom')
      }


    },
    beforeDestroy() {
      this.vuPull.removeEvent()
    },
    methods: {
      'closeLoadTop'() {
        this.vuPull.closeLoadTop()
      },
      'closeLoadBottom'() {
        this.vuPull.closeLoadBottom()
      }
    },
  }
</script>
<style scoped>
  /*--@Desc 继承父元素--*/
  .pull-model {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .pull-scroll-container {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /*--@Desc closeElMove类型的下拉刷新组件--*/
  .pull-closeElMove, .pull-normal-top, .pull-shadow {
    position: relative;
    margin-top: -50px;
    height: 50px;
    text-align: center;
    z-index: 10;
  }

  .pull-shadow-box {
    position: absolute;
    left: -10%;
    top: -50px;
    width: 120%;
    height: 100px;
    opacity: 0;
    background: rgba(0, 0, 0, .1);
    overflow: hidden;

  }

  .pull-bottom-shadow-box {
    position: absolute;
    left: -10%;
    top: 0;
    width: 120%;
    height: 100px;
    opacity: 0;
    background: rgba(0, 0, 0, .1);
    overflow: hidden;
  }

  .pull-bottom-shadow {
    position: relative;
    margin-bottom: -50px;
    height: 50px;
    text-align: center;
    /*z-index:9999;*/
  }

  .pull-closeElMove img {
    height: 44px;
  }

  .pull-normal-top {
    line-height: 50px;
  }

  .pull-normal-top img, .pull-normal-bottom img {
    position: relative;
    top: 7px;
    width: 26px;
    -webkit-transition: 200ms ease;
    -ms-transition: 200ms ease;
    transition: 200ms ease;
  }

  .move-normal {
    -webkit-transition: 500ms ease;
    -ms-transition: 500ms ease;
    transition: 500ms ease;
  }

  .rotate-180 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  .inAni {
    -webkit-animation: rotate-infinite 500ms linear infinite;
    -ms-animation: rotate-infinite 500ms linear infinite;
    animation: rotate-infinite 500ms linear infinite;
  }

  .shadow-tween {
    -webkit-transition: 1500ms ease;
    -ms-transition: 1500ms ease;
    transition: 1500ms ease;
  }

  .pull-normal-bottom {
    position: relative;
    margin-bottom: -50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }

  @-webkit-keyframes rotate-infinite {
    0% {
      -webkit-transform: rotate(360deg)
    }
    100% {
      -webkit-transform: rotate(0deg)
    }
  }

  @-ms-keyframes rotate-infinite {
    0% {
      -ms-transform: rotate(360deg)
    }
    100% {
      -ms-transform: rotate(0deg)
    }
  }

  @keyframes rotate-infinite {
    0% {
      transform: rotate(360deg)
    }
    100% {
      transform: rotate(0deg)
    }
  }


</style>
